<template>
  <div class="admin-layout">
    <!-- 左侧导航栏 -->
    <aside class="sidebar" :class="{ 'collapsed': isSidebarCollapsed }">
      <div class="sidebar-header">
        <div class="logo-container">
          <svg class="logo-svg" width="40" height="40" viewBox="0 0 128 128">
            <defs>
              <!-- 主渐变色 -->
              <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#1a237e"/>
                <stop offset="100%" style="stop-color:#0d47a1"/>
              </linearGradient>
              
              <!-- 光效渐变 -->
              <linearGradient id="glow-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:rgba(255,255,255,0.2)"/>
                <stop offset="100%" style="stop-color:rgba(255,255,255,0)"/>
              </linearGradient>
              
              <!-- 定义剪切路径 -->
              <clipPath id="hex-clip">
                <path d="M64 8L112 36V92L64 120L16 92V36L64 8Z"/>
              </clipPath>
            </defs>
            
            <!-- 背景六边形 -->
            <path 
              d="M64 8L112 36V92L64 120L16 92V36L64 8Z" 
              fill="url(#logo-gradient)"
            />
            
            <!-- 光效层 -->
            <path 
              d="M64 8L112 36V92L64 120L16 92V36L64 8Z" 
              fill="url(#glow-gradient)"
              opacity="0.5"
            />
            
            <!-- API 图形元素 -->
            <g transform="translate(32, 40)" fill="#fff">
              <!-- 字母 E 简化图形 -->
              <path d="M0 0H40V8H8V20H32V28H8V40H40V48H0V0Z"/>
              
              <!-- 装饰性连接线 -->
              <circle cx="50" cy="24" r="4"/>
              <path d="M54 24H64" stroke="#fff" stroke-width="2"/>
            </g>
            
            <!-- 动态圆点装饰 -->
            <circle cx="20" cy="20" r="2" fill="#fff" class="pulse-dot"/>
            <circle cx="108" cy="108" r="2" fill="#fff" class="pulse-dot"/>
          </svg>
          <span class="logo-text" v-show="!isSidebarCollapsed">ETNOR-API</span>
        </div>
      </div>

      <div class="menu-container">
        <el-menu
          :default-active="activeMenu"
          :collapse="isSidebarCollapsed"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#409EFF"
          @select="handleMenuSelect"
        >
          <template v-for="item in menuItems">
            <!-- 有子菜单的项目 -->
            <el-submenu 
              v-if="item.children && item.children.length > 0"
              :key="item.id"
              :index="item.url.toString()"
            >
              <template #title>
                <div class="menu-item-content">
                  <i :class="item.icon || getMenuIcon(item.url)"></i>
                  <span class="menu-text">{{ item[`name${currentLanguage}`] }}</span>
                </div>
              </template>
              
              <el-menu-item
                v-for="child in item.children"
                :key="child.id"
                :index="child.url.toString()"
              >
                <div class="menu-item-content">
                  <i :class="child.icon || getMenuIcon(child.url)"></i>
                  <span class="menu-text">{{ child[`name${currentLanguage}`] }}</span>
                </div>
              </el-menu-item>
            </el-submenu>

            <!-- 没有子菜单的项目 -->
            <el-menu-item v-else :key="item.id" :index="item.url.toString()">
              <div class="menu-item-content">
                <i :class="item.icon || getMenuIcon(item.url)"></i>
                <span class="menu-text">{{ item[`name${currentLanguage}`] }}</span>
                <span v-if="item.state === '0'" class="maintenance-tag">维护中</span>
              </div>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </aside>

    <!-- 主要内容区域 -->
    <div class="main-container">
      <!-- 顶部导航栏 -->
      <header class="main-header">
        <div class="header-left">
          <button class="menu-toggle" @click="toggleSidebar">
            <i class="fas fa-bars"></i>
          </button>
          <div class="breadcrumb">
            <i class="fas fa-home"></i>
            <span>{{ currentPath }}</span>
          </div>
        </div>

        <div class="header-right">
          <!-- 主题切换 -->
          <div class="theme-switch">
            <div class="switch-track" @click="toggleTheme">
              <div class="switch-handle" :class="{ 'dark': isDarkMode }">
                <div class="switch-icons">
                  <!-- 白天图标 -->
                  <div class="day-icon" :class="{ 'hidden': isDarkMode }">
                    <div class="sun">
                      <i class="fas fa-sun"></i>
                    </div>
                    <div class="clouds">
                      <span class="cloud"></span>
                      <span class="cloud"></span>
                    </div>
                  </div>
                  <!-- 夜晚图标 -->
                  <div class="night-icon" :class="{ 'visible': isDarkMode }">
                    <div class="moon">
                      <i class="fas fa-moon"></i>
                    </div>
                    <div class="stars">
                      <span class="star"></span>
                      <span class="star"></span>
                      <span class="star"></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Git链接 -->
          <a href="https://gitee.com/Eternal_CC/etnor-admin" 
             target="_blank" 
             class="git-link"
             title="访问代码仓库">
            <i class="fab fa-github"></i>
          </a>

          <!-- 用户菜单 -->
          <el-dropdown trigger="click" @command="handleCommand">
            <div class="user-info">
              <img :src="userAvatar" class="user-avatar"/>
              <span class="username">{{ username }}</span>
              <i class="el-icon-caret-bottom"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <i class="fas fa-user"></i> 个人信息
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  <i class="fas fa-cog"></i> 系统设置
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  <i class="fas fa-sign-out-alt"></i> 退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 新增公告轮播区域 -->
      <div class="announcement-carousel">
        <el-carousel 
          height="40px" 
          direction="vertical" 
          :autoplay="true"
          :interval="3000"
          indicator-position="none">
          <el-carousel-item v-for="item in announcements" :key="item.id" @click.native="viewAnnouncementDetail(item)">
            <div class="announcement-item">
              <i class="fas fa-bullhorn"></i>
              <span class="announcement-text">{{ item.title }}</span>
              <span class="announcement-date">{{ item.date }}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 内容区域 -->
      <main class="main-content">
        <router-view :current-language="currentLanguage"></router-view>
      </main>

      <!-- 底部版权信息 -->
      <footer class="main-footer">
        <div class="footer-content">
          <p>&copy; 2024 E特尔诺. All rights reserved.</p>
          <div class="footer-links">
            <a href="#">隐私政策</a>
            <span class="divider">|</span>
            <a href="#">服务条款</a>
            <span class="divider">|</span>
            <a href="#">帮助中心</a>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';

export default {
  data() {
    return {
      // 侧边栏状态
      isSidebarCollapsed: false,
      
      // 语言设置
      currentLanguage: localStorage.getItem('language') || 'zh',
      
      // 用户信息
      username: localStorage.getItem('account') || '',
      userAvatar: 'https://api.dicebear.com/7.x/avatars/svg?seed=Felix', // 默认头像
      
      // 导航相关
      activeMenu: 'control-center',
      currentPath: '控制台',
      
      // 菜单数据
      menuItems: [],
      
      // 主题设置
      isDarkMode: false,
      
      // 路径导航
      breadcrumbs: [],
      
      showMenu: false, // 初始状态
      
      // 添加公告数据
      announcements: [
        {
          id: 1,
          title: '系统升级通知',
          content: '系统将于2024年3月20日进行升级维护...',
          date: '2024-03-18',
          author: '系统管理员'
        },
        {
          id: 2,
          title: '新功能上线公告',
          content: '我们很高兴地通知您，新的功能已经上线...',
          date: '2024-03-15',
          author: '产品团队'
        }
        // 更多公告...
      ]
    };
  },
  
  watch: {
    '$route'(to) {
      this.updateBreadcrumbs(to);
    }
  },
  
  created() {
    this.fetchMenuItems();
    this.initTheme();
    this.fetchAnnouncements();
  },
  
  mounted() {
    // 初始化页面标题
    document.title = 'E特尔诺管理平台';
    
    // 添加视口meta标签防止自动缩放
    const viewportMeta = document.querySelector('meta[name="viewport"]');
    if (viewportMeta) {
      viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
    } else {
      const meta = document.createElement('meta');
      meta.name = 'viewport';
      meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no';
      document.head.appendChild(meta);
    }
    
    // 检查移动端
    this.checkMobileDevice();
    
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  
  methods: {
    // 切换侧边栏
    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed;
      if (window.innerWidth <= 768) {
        document.body.style.overflow = this.isSidebarCollapsed ? '' : 'hidden';
      }
    },
    
    // 切换主题
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      localStorage.setItem('darkMode', this.isDarkMode);
      this.applyTheme();
    },
    
    // 应用主题
    applyTheme() {
      // 移除所有主题类
      document.documentElement.classList.remove('light-theme', 'dark-theme');
      // 添加当前主题类
      document.documentElement.classList.add(this.isDarkMode ? 'dark-theme' : 'light-theme');
      
      // 更新主题颜色
      const metaThemeColor = document.querySelector('meta[name="theme-color"]');
      if (metaThemeColor) {
        metaThemeColor.setAttribute('content', this.isDarkMode ? '#1a1a1a' : '#ffffff');
      }
    },
    
    // 获取菜单数据
    async fetchMenuItems() {
      try {
        const response = await axios.get('/api/preData/menu');
        if (response.data.code === 200) {
          this.menuItems = response.data.data;
          this.processMenuItems();
        }
      } catch (error) {
        console.error('获取菜单失败:', error);
        this.$message.error('获取菜单数据失败');
      }
    },
    
    // 处理菜单数据
    processMenuItems() {
      this.menuItems = this.menuItems.map(item => ({
        ...item,
        icon: this.getMenuIcon(item.url),
        badge: this.getMenuBadge(item)
      }));
    },
    
    // 获取单图标
    getMenuIcon(url) {
      const icons = {
        'control-center': 'el-icon-house',
        'interface-management': 'el-icon-warning',
        'developer-center': 'fas fa-code', 
        'E-documents': 'el-icon-document',
        'partner-project': 'el-icon-thumb',
        'links': 'el-icon-link',
        'user/info': 'el-icon-user',
        'bug-center': 'el-icon-headset',
        'repository': 'el-icon-folder',
        'feedback': 'el-icon-message',
        'user-management': 'el-icon-user',
        'role-management': 'el-icon-user',
        'add-interface': 'el-icon-plus',
        'my-api': 'el-icon-s-operation',
        'api-review': 'el-icon-view',
        'blog': 'el-icon-notebook-1',
        'news-management': 'el-icon-news',
        'announcement-management': 'el-icon-bell'
      };
      return icons[url] || 'el-icon-circle-check';  // 默认图标
    },
    
    // 获取菜单徽章
    getMenuBadge(item) {
      if (item.state === '0') return '维护中';
      if (item.isNew) return 'NEW';
      return null;
    },
    
    // 处理菜单选择
    handleMenuSelect(index) {
      this.activeMenu = index;
      this.$router.push('/' + index);
      
      // 移动端自动收起菜单
      if (window.innerWidth <= 768) {
        this.showMenu = false;
      }
    },
    
    // 更新面包屑
    updateBreadcrumbs(route) {
      const paths = route.path.split('/').filter(Boolean);
      this.breadcrumbs = paths.map((path, index) => {
        const menuItem = this.findMenuItem(path);
        return {
          name: menuItem ? menuItem[`name${this.currentLanguage}`] : path,
          path: '/' + paths.slice(0, index + 1).join('/')
        };
      });
      
      // 更新当前路径
      this.currentPath = this.breadcrumbs[this.breadcrumbs.length - 1]?.name || '控制台';
    },
    
    // 查找菜单项
    findMenuItem(path) {
      return this.menuItems.find(item => item.url === path);
    },
    
    // 处理用户命令
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$router.push('/profile');
          break;
        case 'settings':
          this.$router.push('/settings');
          break;
        case 'logout':
          this.handleLogout();
          break;
      }
    },
    
    // 处登出
    handleLogout() {
      this.$confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem('token');
        localStorage.removeItem('account');
        this.$router.push('/login');
        this.$message.success('安全退出');
      }).catch(() => {});
    },
    
    // 检查移动设备
    checkMobileDevice() {
      const isMobile = window.innerWidth <= 768;
      if (isMobile) {
        this.isSidebarCollapsed = true;
        document.body.classList.add('mobile-device');
      } else {
        document.body.classList.remove('mobile-device');
      }
    },
    
    // 处理窗口大小变化
    handleResize() {
      this.checkMobileDevice();
    },
    
    // 访问Git仓库
    goGit() {
      window.open('https://gitee.com/Eternal_CC/etnor-admin', '_blank');
    },
    
    toggleMenu() {
      this.showMenu = !this.showMenu;
    },
    
    // 获取公告列表
    async fetchAnnouncements() {
      try {
        const response = await axios.get('/api/announcements');
        if (response.data.code === 200) {
          this.announcements = response.data.data;
        }
      } catch (error) {
        console.error('获取公告失败:', error);
      }
    },
    
    // 查看公告详情
    viewAnnouncementDetail(announcement) {
      this.$router.push({
        path: '/announcement-detail',
        query: { id: announcement.id }
      });
    },
    
    initTheme() {
      // 从本地存储读取主题设置
      this.isDarkMode = localStorage.getItem('darkMode') === 'true';
      this.applyTheme();
    }
  }
};
</script>

<style scoped>
/* 基础布 */
.admin-layout {
  min-height: 100vh;
  display: flex;
  width: 100%;
  overflow-x: hidden; /* 防止水平滚动 */
}

/* 左侧导航栏 */
.sidebar {
  width: 260px;
  background: linear-gradient(180deg, #1a237e 0%, #0d47a1 100%);
  color: white;
  transition: all 0.3s ease;
  position: fixed;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
  width: 80px;
}

/* Logo区域 */
.sidebar-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.logo-svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
  white-space: nowrap;
  opacity: 1;
  transition: all 0.3s ease;
}

.collapsed .logo-text {
  opacity: 0;
  width: 0;
}

/* 菜单容器 */
.menu-container {
  height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 1rem 0;
}

/* 自定义滚动条 */
.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}

.menu-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

/* 内容区域 */
.main-container {
  flex: 1;
  margin-left: 260px;
  transition: all 0.3s ease;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 260px); /* 使用视口宽度计算 */
  position: relative; /* 添加定位上下文 */
  overflow-x: hidden; /* 防止内容溢出 */
  box-sizing: border-box; /* 确保内边距不会影响宽度 */
}

.collapsed + .main-container {
  margin-left: 80px;
  width: calc(100vw - 80px); /* 使用视口宽度计算 */
}

/* 顶部导航栏 - 添加固定效果 */
.main-header {
  height: 64px;
  background-color: white;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-toggle {
  background: none;
  border: none;
  color: #666;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background: #f0f0f0;
  color: #1a237e;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #666;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* 主题切换样式 */
.theme-switch {
  margin-right: 1rem;
}

.switch-track {
  width: 60px;
  height: 30px;
  background: #e0e7ff;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.switch-handle {
  width: 26px;
  height: 26px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-handle.dark {
  left: calc(100% - 28px);
  background: #1a237e;
}

.switch-icons {
  position: relative;
  width: 100%;
  height: 100%;
}

.day-icon, .night-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.day-icon {
  opacity: 1;
  transform: rotate(0);
}

.day-icon.hidden {
  opacity: 0;
  transform: rotate(90deg);
}

.night-icon {
  opacity: 0;
  transform: rotate(-90deg);
}

.night-icon.visible {
  opacity: 1;
  transform: rotate(0);
}

.sun i {
  color: #ffd700;
  font-size: 14px;
}

.moon i {
  color: #ffffff;
  font-size: 14px;
}

.clouds, .stars {
  position: absolute;
  width: 100%;
  height: 100%;
}

.cloud, .star {
  position: absolute;
  background: white;
  border-radius: 50%;
}

.cloud {
  width: 4px;
  height: 4px;
}

.cloud:nth-child(1) { top: 20%; left: 20%; }
.cloud:nth-child(2) { top: 60%; left: 60%; }

.star {
  width: 2px;
  height: 2px;
  background: #fff;
}

.star:nth-child(1) { top: 20%; left: 20%; }
.star:nth-child(2) { top: 40%; left: 50%; }
.star:nth-child(3) { top: 60%; left: 30%; }

/* 深色模式下的轨道样式 */
.dark .switch-track {
  background: #0d47a1;
}

/* Git链接 */
.git-link {
  color: #666;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.git-link:hover {
  color: #1a237e;
  transform: scale(1.1);
}

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.user-info:hover {
  background: #f0f0f0;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-weight: 500;
  color: #333;
}

/* 内容区域 */
.main-content {
  flex: 1;
  padding: 2rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* 添加这个样式，确保所有子组件都能填充整个宽度 */
.main-content > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 底部版权信息 */
.main-footer {
  padding: 1.5rem;
  background: white;
  text-align: center;
  color: #666;
  border-top: 1px solid #eee;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  margin-top: 0.5rem;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #1a237e;
}

.divider {
  color: #ddd;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    z-index: 1000;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
  }

  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  .main-container {
    margin-left: 0 !important;
    width: 100vw !important; /* 使用视口宽度 */
  }

  .collapsed + .main-container {
    margin-left: 0 !important;
    width: 100vw !important;
  }

  .menu-toggle {
    z-index: 1001;
  }

  /* 添加遮罩 */
  .sidebar:not(.collapsed)::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
  }
}

/* 动画效果 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-enter-active {
  animation: slideIn 0.3s ease;
}

.slide-leave-active {
  animation: slideIn 0.3s ease reverse;
}

/* 确保所有顶级菜单项对齐一致 */
:deep(.el-menu-item),
:deep(.el-submenu__title) {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 20px !important;
}

/* 统一菜单项内容布局 */
.menu-item-content,
.menu-item-content-sub {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

/* 统一图标样式和间距 */
.menu-item-content i,
.menu-item-content-sub i {
  font-size: 16px;
  width: 24px;
  text-align: center;
  margin-right: 12px;
}

/* 修复下拉箭头位置 */
:deep(.el-submenu__icon-arrow) {
  right: 15px;
  margin-top: -7px;
}

/* 确保文本对齐 */
.menu-text,
.menu-text-sub {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 去掉所有特殊的边距设置 */
.menu-text-sub {
  margin-left: 0;
}

/* 优化子菜单缩进 */
:deep(.el-submenu .el-menu-item) {
  padding-left: 56px !important; /* 调整为适当的缩进 */
}

/* 修复维护标签位置 */
.maintenance-tag {
  position: absolute;
  right: 30px; /* 给下拉箭头留出空间 */
  padding: 2px 6px;
  font-size: 12px;
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
  border-radius: 4px;
}

/* 公告轮播样式 */
.announcement-carousel {
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 0 2rem;
  margin-top: 64px;
}

.announcement-item {
  display: flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
  padding: 0 1rem;
  transition: all 0.3s ease;
  color: var(--text-primary);
}

.announcement-item:hover {
  background: #f5f5f5;
}

.announcement-item i {
  color: #1a237e;
  margin-right: 1rem;
}

.announcement-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}

.announcement-date {
  color: var(--text-secondary);
  margin-left: 1rem;
  font-size: 0.9rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .announcement-carousel {
    padding: 0 1rem;
  }
  
  .announcement-date {
    display: none;
  }
}

/* Logo 相关样式 */
.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.logo-svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* 添加动画效果 */
@keyframes pulse {
  0% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0.4; transform: scale(1); }
}

.pulse-dot {
  animation: pulse 2s infinite;
}

.pulse-dot:nth-child(2) {
  animation-delay: 1s;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}

/* 添加悬停效果 */
.logo-container:hover .logo-svg {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 禁用页面缩放 */
:root {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

/* 优化移动端点击区域 */
.menu-toggle,
.el-menu-item,
.el-submenu__title {
  min-height: 48px; /* 确足够的点击区域 */
}

/* 内容区域 */
.main-container {
  flex: 1;
  margin-left: 260px; /* 侧边栏宽度 */
  transition: all 0.3s ease;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: calc(100vw - 260px); /* 使用视口宽度计算 */
  position: relative; /* 添加定位上下文 */
  overflow-x: hidden; /* 防止内容溢出 */
  box-sizing: border-box; /* 确保内边距不会影响宽度 */
}

.main-content {
  flex: 1;
  padding: 2rem;
  width: 100%; /* 确保宽度为100% */
  max-width: 100%; /* 确保最大宽度为100% */
  box-sizing: border-box; /* 确保内边距不会影响宽度 */
  overflow-x: hidden; /* 防止内容溢出 */
  
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-container {
    margin-left: 0 !important; /* 移动端时不留边距 */
    width: 100vw !important; /* 使用视口宽度 */
  }

  .collapsed + .main-container {
    margin-left: 0 !important; /* 确保折叠状态下宽度正确 */
    width: 100vw !important; /* 使用视口宽度 */
  }
}

/* 添加下面的样式，为固定的头部腾出空间 */
.announcement-carousel {
  margin-top: 64px;
}

/* 确保在侧边栏收起时正确定位 */
.collapsed + .main-container .main-header {
  left: 80px;
  width: calc(100% - 80px);
}

.main-container .main-header {
  left: 260px;
  width: calc(100% - 260px);
}

/* 移动设备上的调整 */
@media (max-width: 768px) {
  .main-container .main-header,
  .collapsed + .main-container .main-header {
    left: 0;
    width: 100%;
  }
}
</style>

